<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增产品')" />
    <th:block th:include="include :: bootstrap-fileinput-css"/>
</head>
<body class="white-bg">
<form class="form-horizontal m" id="form-product-add">
    <div class="tabs-container">
        <ul class="nav nav-tabs">
            <li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true">1产品基础信息</a>
            </li>
            <li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false">2产品相关图片</a>
            </li>
        </ul>
        <div class="tab-content">
            <div id="tab-1" class="tab-pane active">
                <div class="panel-body">
                    <div class="form-group">
                        <label class="col-sm-3 control-label is-required">产品名称：</label>
                        <div class="col-sm-8">
                            <input name="productName" class="form-control" type="text" required maxlength="20">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label is-required">产品分类：</label>
                        <div class="col-sm-8">
                            <select name="productTypeId" class="form-control m-b" required>
                                <option th:each="ptype:${productTypeList}" th:value="*{ptype.id}" th:text="*{ptype.productTypeName}"></option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label is-required">产品类型：</label>
                        <div class="col-sm-8">
                            <select name="productClass" class="form-control m-b" required>
                                <option th:each="dict:${@dict.getType('busi_product_class')}" th:value="*{dict.dictValue}" th:text="*{dict.dictLabel}"></option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label is-required">产品单价：</label>
                        <div class="col-sm-8">
                            <input name="amount" class="form-control" type="text" required digits="true" min="0" max="100000">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label is-required">产品返现金额：</label>
                        <div class="col-sm-8">
                            <input name="cashbackAmount" class="form-control" type="text" required digits="true" value="0" min="0" max="100000">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label is-required">排序：</label>
                        <div class="col-sm-8">
                            <input name="sort" class="form-control" type="text" digits="true" min="0" max="100">
                            <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 排序数字越大排列越靠前</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">是否上架：</label>
                        <div class="col-sm-8">
                            <div class="radio-box">
                                <input type="radio" name="onlineStatus" value="1">
                                <label th:for="onlineStatus" th:text="是"></label>
                            </div>
                            <div class="radio-box">
                                <input type="radio" name="onlineStatus" checked value="0">
                                <label th:for="onlineStatus" th:text="否"></label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label is-required">产品描述：</label>
                        <div class="col-sm-8">
                            <textarea name="remark" class="form-control" required maxlength="80"></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <div id="tab-2" class="tab-pane">
                <div class="panel-body">
                    <div class="form-group">
                        <label class="col-sm-3 control-label is-required">产品主图：</label>
                        <div class="col-sm-8">
                            <input type="hidden" name="mainImage">
                            <div class="file-loading">
                                <input class="form-control file-upload" id="mainImage" name="file" type="file">
                            </div>
                            <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 只能上传png jpg gif图片且大小不能超过200KB</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label is-required">产品详情图(最多20张)：</label>
                        <div class="col-sm-8">
                            <div class="file-loading">
                                <input class="form-control file-upload" id="detailImages" multiple  name="file" type="file">
                            </div>
                            <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 只能上传png jpg gif图片且大小不能超过200KB</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label is-required">产品轮播图(最多5张)：</label>
                        <div class="col-sm-8">
                            <div class="file-loading">
                                <input class="form-control file-upload" id="loopImages" multiple  name="file" type="file">
                            </div>
                            <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 只能上传png jpg gif图片且大小不能超过200KB</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
<style>
    .file-drop-zone-title{padding:45px 10px}
    .file-thumbnail-footer{height:30px !important;}
    .file-footer-caption{margin-bottom:0 !important;}
    .kv-file-content{width: 150px !important;height: 100px !important;}
</style>
<th:block th:include="include :: footer" />
<th:block th:include="include :: bootstrap-fileinput-js"/>
<script th:inline="javascript">
    var prefix = ctx + "business/product"
    $("#form-product-add").validate({
        focusCleanup: true
    });

    var detailImagesArr = [];
    var loopImagesArr = [];
    function submitHandler() {
        if ($.validate.form()) {
            let saveData = $('#form-product-add').serialize();
            if(detailImagesArr.length > 0){
                detailImagesArr.forEach((url)=>saveData += "&detailImages=" + getRealImg(url));
            }
            if(loopImagesArr.length > 0){
                loopImagesArr.forEach((url)=>saveData += "&loopImages=" + getRealImg(url));
            }
            $.operate.save(prefix + "/add", saveData);
        }
    }

    function getRealImg(url){
        return url.substring(url.lastIndexOf("/") + 1);
    }

    $("#mainImage").fileinput({
        uploadUrl: '/common/upload',
        maxFileCount: 1,
        maxFileSize: 1000,
        allowedFileTypes: ['image'],
        allowedFileExtensions: ['jpg','png','gif','jpeg'],
        autoReplace: true
    }).on('fileuploaded', function (event, data, previewId, index) {
        $("input[name='" + event.currentTarget.id + "']").val(getRealImg(data.response.url));
    }).on('fileremoved', function (event, id, index) {
        $("input[name='" + event.currentTarget.id + "']").val('');
    });

    $("#detailImages").fileinput({
        uploadUrl: '/common/upload',
        maxFileCount: 20,
        maxFilesNum : 20,
        maxFileSize: 1000,
        allowedFileTypes: ['image'],
        allowedFileExtensions: ['jpg','png','gif','jpeg']
    }).on('fileuploaded', function (event, data, previewId, index) {
        detailImagesArr.push(data.response.url);
    }).on('fileremoved', function (event, id, index) {
        detailImagesArr.splice(detailImagesArr.indexOf(data.response.url), 1);
    });

    $("#loopImages").fileinput({
        uploadUrl: '/common/upload',
        maxFileCount: 5,
        maxFilesNum : 5,
        maxFileSize: 1000,
        allowedFileTypes: ['image'],
        allowedFileExtensions: ['jpg','png','gif','jpeg']
    }).on('fileuploaded', function (event, data, previewId, index) {
        loopImagesArr.push(data.response.url);
    }).on('fileremoved', function (event, id, index) {
        loopImagesArr.splice(loopImagesArr.indexOf(data.response.url), 1);
    });
</script>
</body>
</html>